<template>
	<view style="padding: 20rpx 40rpx;">
		<text style="font-size: 40rpx;font-weight: bold;">{{title}}</text><br />
		<text>作者：阳雪梅</text>
		<u-text mode="date" :text="date"></u-text>
		<image src="../../static/image/4.jpg" style="width: 100%;" mode="aspectFill"></image>
		<u-read-more showHeight="100" ref="uReadMore" :toggle="true">
			<u-parse :content="content" @load="load"></u-parse>
		</u-read-more>
		<view style="display: flex;align-items: center;position: fixed;bottom: 40rpx;width: 670rpx;">
			<button @click="show=true" style="width: 400rpx;height: 80rpx;line-height: 80rpx;background-color: #00c297;"
				type="primary" size="mini">捐献积分</button>
		</view>
		<u-popup :round="10" :closeOnClickOverlay="false" mode="center" :show="show">
			<view
				style="width: 600rpx;display: flex;align-items: center;flex-direction: column;line-height: 100rpx;">
				<text>提示</text>
				<input type="number" v-model="num" placeholder="请输入捐献的积分" />
				<view
					style="display: flex;justify-content: space-around;width: 100%;border-top: #dddddd 1rpx solid;margin-top: 20rpx;">
					<text @click="show=false">取消</text>
					<text @click="toevent" style="color: #0055FF;">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:'',
				show: false,
				title: '100积分=1袋猫粮，快来给动物们集物资',
				date: Number(new Date()),
				content: `<p>山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						<p/>山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
						山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
						苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
						无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`,
			}
		},
		methods: {
			toevent() {
				if(this.num.length==0){
					uni.$u.toast('请输入捐献的积分数量')
				}else{
					uni.$u.toast('成功捐献了 '+this.num+' 积分')
					this.show=false
				}
			},
			load() {
				this.$refs.uReadMore.init();
			}
		}
	}
</script>

<style>

</style>
